<%- include("../header.ejs")-%>
<el-header style="font-size: 12px">
</el-header>
<el-main>
    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm"
        v-loading="loading" element-loading-background="rgba(0, 0, 0, 0.8)">

        <el-form-item label="服务器" prop="server_id">
            <el-select v-model="ruleForm.server_id" filterable placeholder="请选择">
                <el-option v-for="item in servers" :key="item.server_id" :label='"["+item.server_id+"]"+item.name' :value="item.server_id">
                </el-option>
            </el-select>
        </el-form-item>

        <el-form-item label="标题" prop="title" style="width:800px;">
            <el-input v-model="ruleForm.title" placeholder="请输入邮件标题"></el-input>
        </el-form-item>

        <el-form-item label="内容" prop="content" style="width:800px;">
            <el-input type="textarea" rows=10 placeholder="请输入邮件内容" v-model="ruleForm.content">
            </el-input>
        </el-form-item>

        <el-form-item label="附件" prop="attachment" style="width:800px;">
            <el-input type="textarea" rows=4 placeholder='请输入json ex: {"2":100,"3":200}' v-model="ruleForm.attachment">
            </el-input>
        </el-form-item>

        <el-form-item>
            <el-button type="primary" icon="el-icon-message" @click="submitForm">发送</el-button>
        </el-form-item>

    </el-form>
</el-main>

<%- include("../footer.ejs")-%>

<script>

    new Vue({
        router,
        el: '#app',
        data() {
            return {
                loading: false,
                servers: [],
                ruleForm: {
                    server_id: "",
                    title: "",
                    content: "",
                    attachment: "",
                },
                rules: {
                    server_id: [
                        { required: true, message: '请选择服务器', trigger: 'change' },
                    ],
                    title: [
                        { required: true, message: '请输入标题', trigger: 'blur' },
                        { min: 1, max: 50, message: '长度在 1 到 50 个字符', trigger: 'blur' }
                    ],
                    content: [
                        { required: true, message: '请输入内容', trigger: 'blur' },
                        { min: 1, max: 500, message: '长度在 1 到 500 个字符', trigger: 'blur' }
                    ],
                    attachment: [],
                }
            }
        },
        created: function () {
            fetch('/api/servers').then(response => response.json()).then(json => {
                this.servers = json;
            });
        },
        methods: {
            onSubmit() {
                console.log('submit!');
            },
            submitForm() {
                this.$refs["ruleForm"].validate((valid) => {
                    if (valid) {
                        if (!this.loading) {
                            this.loading = true;
                            let _this = this;

                            if (_this.ruleForm.attachment) {
                                try {
                                    JSON.parse(_this.ruleForm.attachment)
                                }catch (e) {
    
                                    this.$message.error('json error: ' + e.message);
                                    this.loading = false;
                                    return
                                }
                            }

                            fetch('/api/mail/server/' + _this.ruleForm.server_id, {
                                method: 'PUT',
                                headers: { 'content-type': 'application/json; charset=utf-8', },
                                body: JSON.stringify(_this.ruleForm),
                            }).then(response => response.json()).then(json => {
                                _this.dialogVisible = false
                                message(json, _this)
                                if (json.success) {
                                    this.$refs["ruleForm"].resetFields();
                                }
                                this.loading = false;
                            });

                        }

                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
        }
    })

</script>